<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css" />
		<script src="dist/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.modal-title {
				font-size: 30px;
			}
			
			#q {
				margin-left: 100px;
			}
			
			#w {
				margin-left: 50px;
			}
			
			#r {
				float: left;
			}
			
			.bf a {
				color: #00BE06;
			}
			
			.bf2 a {
				color: #000000;
			}
			
			a:hover {
				text-decoration: none;
				color: #00BE06;
			}
			
			h1 {
				font-size: 20px;
				color: #00BE06;
				font-family: "微软雅黑";
			}
		</style>
	</head>

	<body>
		<div class="container">
			<form id="form1" name="form1" onsubmit="return checkform()" method="get" action="GeRenZhuYe.html">
				<table align="center" id="tab">
					<input type="button" id="zhuce" onclick="btn()" value="登录" />
					<div id="mymodal" class="modal fade">
						<div id="" class="modal-dialog">
							<div class="modal-content" style="width: 400px; height: 500px;">
								<div class="modal-header" style="color: #00BE06;">
									<h4>爱奇艺&ensp;·&ensp;登录</h4>
								</div>
								<div class="modal-body">
									<div class="input-group" style="margin-top: 20px;">
										<div class="input-group-btn">
											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">中国大陆<span class="caret"></span></button>
											<ul class="dropdown-menu">
												<li>
													<a href="#">中国大陆</a>
												</li>
												<li>
													<a href="#">台湾</a>
												</li>
												<li>
													<a href="#">香港</a>
												</li>
												<li>
													<a href="#">澳门</a>
												</li>
											</ul>

										</div>
										<!-- /btn-group -->
										<input type="text" class="form-control" placeholder="请输入手机号" name="txtUsreName" id="txtUsreName" onblur="testUName()">
									</div>
									<div style="margin-top: 15px;color: red;padding-left: 90px;"><span id="spUserName"></span></div>
									<div class="input-group" style="padding-top: 30px;">
										<div class="input-group-btn">
											<button type="button" style="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">输入验证码</span></button>

										</div>
										<!-- /btn-group -->
										<input type="text" class="form-control" placeholder="" name="txtPwd" id="txtPwd" onblur="testPwd()">
									</div>
									<div style="margin-top: 15px;color: red;padding-left: 90px;"><span id="spPwd"></span></div>
									<!-- /input-group -->
									<div class="bf" style="padding-left: 240px;padding-top: 15px; font-size: 12px;">
										没收到？点击
										<a href="#">重新发送</a>
									</div>

									<input type="submit" value="验证" style="width: 300px; height: 48px; margin-left: 30px; margin-top: 50px; background-color: #00BE06; color: white;" />

									<div class="row" style="text-align: center;margin-top: 20px;">
										<div class="col-md-12 bf">
											登录即代表同意
											<a href="# ">用户协议</a>和
											<a href="# ">隐私政策</a>
										</div>
									</div>
								</div>

								<div class="modal-footer ">
									<div class="row ">
										<div class="col-md-12 bf2">
											<a href="# " style="margin-right: 140px;">注册</a>
											<a href="ZhangHanoDenLu.html">账号密码登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
											<a href="index.html">其它方式登录</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</table>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		function btn() {
			$('.modal').modal();
		}

		function testUName() {
			var uname = document.getElementById("txtUsreName").value;
			var sp = document.getElementById("spUserName");
			var reg = /^([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8})$/;
			if(reg.test(uname)) {
				sp.innerHTML = "";
				return true;
			} else {
				sp.innerHTML = "手机号格式不对";
				return false;
			}
		}

		function testPwd() {
			var pwd = document.getElementById("txtPwd").value;
			var sp = document.getElementById("spPwd");
			var reg = /^[A-Za-z0-9_-]{6}$/;
			if(reg.test(pwd)) {
				sp.innerHTML = "";
				return true;
			} else {
				sp.innerHTML = "密码必须是六个字符";
				return false;
			}
		}

		function checkform() {
			if(testUName() && testPwd()) {
				alert("通过验证，可以提交")
				return true;

			} else {
				alert("验证有误，请审核完毕再提交")
				return false;
			}
		}
	</script>

</html>